<template>
    <div class="guide">
        <div class="guide-head">
            <img :src="guide">
            <img :src="guide1">
            <img :src="guide2">
            <img :src="guide3">
        </div>
        <div class="guide-main">
            <div class="guide-prent1">
                <div class="guide-step guide-step1" @click="icon_step1 = !icon_step1">
                    <img :src="guide_step1">
                    <i :class="['icon', icon_step1 ? 'yellow':'upyellow']"></i>
                </div>
                <div class="guide-info" :class="{'showorhide':!icon_step1}">
                    <div class="guide-infomain cl40" >
                        <h2>1 识图标：</h2>
                        <p>a. <span class="safeguard">工资保障</span> ———— 今日工作官方发布职位，100%真实！</p>
                        <p>b. <span class="enterprise">名企</span> ———— 知名企业直招职位，大牌企业更有保障。</p>
                        <p>c. <i class="path"></i><span class="attestation">已认证</span> ———— 已上传公司经营相关资质的公司。</p>
                        <h2>2 发布人信息：</h2>
                        <p>公司营业执照等信息，认证越全面说明企业越靠谱。</p>
                        <h2>3 看留言：</h2>
                        <p>先看看其他用户怎么说，轻松绕过求职坑。</p>
                        <h2>4 不交钱：</h2>
                        <p>坚决拒绝任何形式的先交费再上岗，真实职位绝不会向用户收取任何费用。</p>
                        <i class="expression expression_icon1"></i>
                    </div>
                </div>
            </div>
            <div class="guide-prent2">
                <div class="guide-step guide-step2" @click="icon_step2 = !icon_step2">
                    <img :src="guide_step2">
                    <i :class="['icon',icon_step2 ? 'violet':'upviolet']"></i>
                </div>
                <div class="guide-info" :class="{'showorhide':!icon_step2}">
                    <div class="guide-infomain cl40">
                        <h2>1 细阅读：</h2>
                        <p>请看准职位中写明的时间、地点、要求等，适合自己再报名。</p>
                        <h2>2 勤筛选:</h2>
                        <p>对工作地点、时间、类型等，有明确要求，那勤筛选能大大提高效率哦。</p>
                        <h2>3 爱订阅:</h2>
                        <p>关注感兴趣的发布人，就可以第一时间知悉TA新发布的好职位呦。</p>
                        <p class="step2-btn">PS:在我的简历里 设置求职意向，有更多惊喜！</p>
                        <i class="expression expression_icon2"></i>
                    </div>
                </div>
            </div>
            <div class="guide-prent3">
                <div class="guide-step guide-step3" @click="icon_step3 = !icon_step3">
                    <img :src="guide_step3">
                    <i :class="['icon', icon_step3 ? 'yellow':'upyellow']"></i>
                </div>
                <div class="guide-info" :class="{'showorhide':!icon_step3}">
                    <div class="guide-infomain cl40">
                        <h2>1 在热门页面</h2>
                        <p>找到精品职位模块，点击“更多”可以看到全部的哦~</p>
                        <h2>2 找到自己感兴趣的职位</h2>
                        <p>仔细阅读职位详情，操作流程。</p>
                        <h2>3 报名后</h2>
                        <p>根据职位给出的商家联系方式，积极联系商家，再咨询更详细的工作内容。</p>
                        <i class="expression expression_icon3"></i>
                    </div>
                </div>
            </div>
            <div class="guide-prent4">
                <div class="guide-step guide-step4" @click="icon_step4 = !icon_step4">
                    <img :src="guide_step4">
                    <i :class="['icon',icon_step4 ? 'violet':'upviolet']"></i>
                </div>
                <div class="guide-info" :class="{'showorhide':!icon_step4}">
                    <div class="guide-infomain cl40">
                        <h2>1 主动联系更受商家青睐</h2>
                        <p>如果联系商家时表明身份和报名信息，会更加分哦！</p>
                        <h2>2 商家未能及时回复</h2>
                        <p>可能是因为太忙，或已经结束招聘咯。</p>
                        <p class="step2-btn">PS:请耐心等待，但也不要错过其他好职位哦！</p>
                        <i class="expression expression_icon4"></i>
                    </div>
                </div>
            </div>
            <div class="guide-prent5">
                <div class="guide-step guide-step5" @click="icon_step5 = !icon_step5">
                    <img :src="guide_step5">
                    <i :class="['icon', icon_step5 ? 'yellow':'upyellow']"></i>
                </div>
                <div class="guide-info" :class="{'showorhide':!icon_step5}">
                    <div class="guide-infomain cl40">
                        <h2>1 时间：</h2>
                        <p>每个职位都有不同的结算周期哦，上岗前请跟商家确认结算时间。</p>
                        <h2>2 方式:</h2>
                        <p>以与商家协商的方式为准。部分职位会通过今日工作平台发放，可以在“我的-我的钱包”中查看，可提现至支付宝或银行卡。</p>
                        <i class="expression expression_icon5"></i>
                    </div>
                </div>
            </div>
            <div class="guide-prent6">
                <div class="guide-step guide-step6" @click="icon_step6 = !icon_step6">
                    <img :src="guide_step6">
                    <i :class="['icon',icon_step6 ? 'violet':'upviolet']"></i>
                </div>
                <div class="guide-info" :class="{'showorhide':!icon_step6}">
                    <div class="guide-infomain cl40">
                        <h2>1 在“我的-投诉与反馈”里</h2>
                        <p>如实填写情况，提交后会有人致电您了解情况呦。</p>
                        <h2>2 你可以主动联系我们，拨打电话<a href="tel:010-59664666" style="color: #8378E0">010-59664666</a> 转分机号码 <span  style="color: #8378E0">1040</span>。</h2>
                        <i class="expression expression_icon6"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 组件的模板 -->
        
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        data: function(){
            return{
                guide:require('../../static/imgs/guide.png'),
                guide1:require('../../static/imgs/guide1.png'),
                guide2:require('../../static/imgs/guide2.png'),
                guide3:require('../../static/imgs/guide3.png'),
                guide_step1:require('../../static/imgs/guide_step1.png'),
                guide_step2:require('../../static/imgs/guide_step2.png'),
                guide_step3:require('../../static/imgs/guide_step3.png'),
                guide_step4:require('../../static/imgs/guide_step4.png'),
                guide_step5:require('../../static/imgs/guide_step5.png'),
                guide_step6:require('../../static/imgs/guide_step6.png'),
                icon_step1:true,
                icon_step2:true,
                icon_step3:true,
                icon_step4:true,
                icon_step5:true,
                icon_step6:true,
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} voi
             */
            init (){
                
                function setPxPerRem(){
                    var dpr = 1;
                    //把viewport分成10份的rem，html标签的font-size设置为1rem的大小;
                    var pxPerRem = document.documentElement.clientWidth * dpr / 10;
                    document.querySelector('html').style.fontSize = pxPerRem + 'px';
                }
                setPxPerRem();
                
                
            }
        },
        created(){

            this.init();
            
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../static/css/base.css"></style>
<style src="../../static/css/yy_guide.css"></style>



